<style lang="scss" scoped>
  $width:400px;
  $height:30px;
  $c_height:60px;
  $bg_color:#d6d6d6;
  $active_color:#56c7a2;

  .progress-bar-container{
    width: $width;
    position: relative;
    height: $c_height;
    background: white;
    margin:0px auto;
  }

  .progress-bar{
    width: $width;
    height: $height;
    background: $bg_color;
    float: left;
    clear: both;
    margin-top: $height;
    position: relative;
  }

  .active-block{
    width: $width;
    height: $height;
    background: $active_color;
    display: block;
    position: absolute;
    bottom:0;
    left:0;
  }

  .start-bar,
  .end-bar{
    position: absolute;
    width: 80px;
    height:30px;
    color: #acacac;
    left:0;
    top:0;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    .arrow-icon{
      width:15px;
      height:15px;
      display: inline-block;
      background-image:url("../../assets/images/arrow-down-b.png");
      background-size: cover;
    }
  }

</style>

<template>
  <div class="progress-bar-container">
    <span class="start-bar" ref="start">
      {{startDate}}<br>
      <i class="arrow-icon"></i>
    </span>
    <span class="end-bar" ref="end">
      {{endDate}}<br>
      <i class="arrow-icon"></i>
    </span>
    <div class="progress-bar">
      <span class="active-block" ref="active"></span>
    </div>
  </div>
</template>

<script>
  const CONST_WIDTH=400;

  export default {
    name: 'PercentageBar',
    props: {
      start: {
        type: String,
        required: true,
        default: new Date().getFullYear() + '1-1'
      },
      end: {
        type: String,
        required: true,
        default: new Date().getFullYear() + '12-31'
      }
    },
    data () {
      return {}
    },
    computed:{
      startDate(){

        var date=new Date(this.start);

        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
      },
      endDate () {

        var date=new Date(this.end);

        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
      }
    },
    mounted () {

      debugger;

      var startPos=this.getDaysCount(this.start);

      var strPer=(((startPos-1)/365)*100).toFixed(2);

      var startLength=parseInt(CONST_WIDTH*strPer/100);

      var endPos=this.getDaysCount(this.end);

      var endPer=((endPos/365)*100).toFixed(2);

      //结束灰色快的长度
      var endLength=parseInt(CONST_WIDTH*endPer/100);

      /**
       * 定位高亮滑块的位置
       * @type {string}
       */

      var activeDOM=this.$refs['active'];

      activeDOM.style.left=startLength+'px';

      var length=endLength-startLength;

      activeDOM.style.width=length+'px';

      var startDOM=this.$refs['start'];

      var endDOM=this.$refs['end'];

      startDOM.style.left=startPos+'px';

      startDOM.style.marginLeft=(-1*startDOM.offsetWidth/2)+'px';
//
      endDOM.style.left=(activeDOM.offsetLeft+activeDOM.offsetWidth)+'px';

      endDOM.style.marginLeft=(-1*endDOM.offsetWidth/2)+'px';




    },
    methods: {
      /**
       * 2017-10-1 这样的日期 返回一共多少天
       * @param dateText
       */
      getDaysCount (dateText) {

        var parseDate=new Date(dateText);

        var year=parseDate.getFullYear();

        var flag=this.isLeapYear(year);

        var result=this.stasticMonth(parseDate.getMonth()+1);

        var output=result[0]*30+result[1]*31+result[2]*28+parseDate.getDate();

        if (flag){
          output++;
        }

        return output;
      },
      isLeapYear(year){
        return (year%4==0&&year%100!=0)||year%400==0;
      },
      /**
       * 统计有多少个 大月 小月 还有是否包含2月
       * @param month
       * @returns {(number|number|number)[]}
       */
      stasticMonth (month) {

        /**
         * 小月 大月  2月
         * @type {[number,number,number]}
         */

        var result=[0,0,0];

        var small=[4,6,9,11];

        var big=[1,3,5,7,8,10,12];

        for (var i=1;i<month;i++){

          for (var a=0;a<small.length;a++){
            if (i==small[a]){
              result[0]++;
            }
          }

          for (var b=0;b<big.length;b++){
            if (i==big[b]){
              result[1]++;
            }
          }
        }

        if (month>2&&month!=2){
          result[2]=1;
        }

        return result;

      }
    }

  }
</script>
